<template>
	<view class="content" @click.self="close()">
		<!-- 顶部状态栏占位view -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>

		<view style="text-align: center;margin: 80upx;">
			<image src="../../static/logo/logo1024x1024.png" style="width: 150upx;height: 150upx;margin-top: 40upx;border-radius: 50%;" />
		</view>
		<view class="input-group">
			<view class="input-row border">
				<image src="../../static/icon/icon-phone.png" style="width: 24upx;height: 34upx;margin: 0 20upx;" />
				<m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入账号" @onFocus="onFocus" @input="onFocus"></m-input>
			</view>
			<view v-if="showAccounts && accounts.length > 0" class="select">
				<view v-for="(item, index) in accounts" :key="index" class="select-list">
					<view class="select-list-name" @click="checkAccount(item)">{{ item.username }}</view>
					<view class="select-list-icon" @click="delectAccount(index)">
						<icon type="clear" color="#999" size="14" />
					</view>
				</view>
			</view>
			<view class="input-row border">
				<image src="../../static/icon/icon-password.png" style="width: 26upx;height: 30upx;margin: 0 20upx;" />
				<m-input maxlength="16" type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
		</view>
		<view class="btn-row"><button type="primary" class="primary log-btn" @tap="bindLogin">登录</button></view>
		<view class="oauth-row" v-bind:style="{ top: positionTop + 'px' }"><text>技术服务热线  18535644725</text></view>
		<view class="oauth-bom" @click="jump" v-bind:style="{ top: position + 'px' }"><text>隐私政策</text></view>
		<download-apk ref="downloadApk" v-if="download" />
	</view>
</template>

<script>
	import {
		post,
		request_svn
	} from '../../common/request';
	import {
		showModal
	} from '../../common/common.js';
	import downloadApk from '../../components/download_apk.vue';
	import uniIcon from './../../components/uni-icon/uni-icon.vue';

	export default {
		data() {
			return {
				download: false,
				accounts: [],
				account: '',
				password: '',
				positionTop: 0,
				position: 0,
				hidden: false,
				showAccounts: false
			};
		},
		components: {
			uniIcon,
			downloadApk
		},
		onLoad() {
			uni.removeStorageSync('updata');
			let token = uni.getStorageSync('token') || '';
			if (token == '') {
				let _this = this;
				if (uni.getSystemInfoSync().platform == 'android') {
					plus.runtime.getProperty(plus.runtime.appid, e => {
						var xhr_svn = new plus.net.XMLHttpRequest();
						xhr_svn.onreadystatechange = function() {
							if (xhr_svn.readyState == 4) {
								if (xhr_svn.status == 200) {
									var res = JSON.parse(xhr_svn.responseText);
									if (res.version != e.version) {
										// if (res.version != 1) {
										showModal(res, _this);
									}
								} else {
									plus.nativeUI.toast('网络连接错误！');
								}
							}
						};
						xhr_svn.open('GET', 'http://app.mkkxy.com/version.json'); //这里的地址是上面json文件的地址
						xhr_svn.send();
					});
				}
			}
			if (uni.getStorageSync('accountList')) {
				this.accounts = uni.getStorageSync('accountList');
				this.account = this.accounts[0].username;
				this.password = this.accounts[0].password;
			}
		},
		methods: {
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 99;
				this.position = uni.getSystemInfoSync().windowHeight - 75;
			},
			jump() {
				uni.navigateTo({
					url: '/pages/login/privacypolicy'
				})
			},
			onFocus() {
				this.showAccounts = true;
				this.password = '';
			},

			close() {
				this.showAccounts = false;
			},

			checkAccount(item) {
				this.account = item.username;
				this.password = item.password;
				this.showAccounts = false;
			},
			delectAccount(index) {
				this.accounts.splice(index, 1);
			},
			async bindLogin() {
				if (this.account === '') {
					return uni.showToast({
						title: '请填写登录账号',
						icon: 'none'
					});
				}
				if (this.password === '') {
					return uni.showToast({
						title: '请填写账号密码',
						icon: 'none'
					});
				}
				let _this = this;
				let publickey = await post('/auth/publickey');
				if (publickey.data) {
					var rsa = new this.$jsEncrypt();
					rsa.setPublicKey(publickey.data);
					let platform;
					// #ifdef APP-PLUS
					platform = uni.getSystemInfoSync().platform;
					// #endif
					const data = {
						username: rsa.encrypt(this.account),
						password: rsa.encrypt(this.password),
						clientType: platform === 'ios' ? 2 : 1,
						isEncry: 1
					};
					post('/auth/app/login', data)
						.then(res => {
							let user = {
								username: _this.account,
								password: _this.password
							};
							if (_this.accounts.length > 0 && _this.accounts.filter(x => x.username === user.username).length > 0) {
								_this.accounts.forEach(x => {
									if (x.username === user.username) x = user;
								});
							} else {
								_this.accounts.push(user);
							}
							let loginTime = new Date().getTime();
							uni.setStorageSync('loginTime', loginTime);
							uni.setStorageSync('timeDiff', res.data.t - loginTime);
							uni.setStorageSync('secret', res.data.secret);
							uni.setStorageSync('accountList', _this.accounts);
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('userId', res.data.userId);
							uni.setStorageSync('tenantId', res.data.tenantId);
							uni.switchTab({
								url: '../main/main'
							});
						})
						.catch(err => {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
							uni.hideLoading();
						});
				}
			},
			forgetPass() {
				this.hidden = true;
			},
			cancel() {
				this.hidden = false;
			},
			copy() {
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				});
			}
		},
		onReady() {
			this.initPosition();
		}
	};
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #f9fafc;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #f9fafc;
		top: 0;
		z-index: 999;
	}

	.content {
		background: #f9fafc;
	}

	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row .navigator {
		color: #007aff;
		padding: 0 20upx;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #cbcbcb;
	}

	.oauth-bom {
		display: flex;
		flex-direction: row;
		font-size: 20upx;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #007AFF;
	}

	.oauth-image {
		width: 100upx;
		height: 100upx;
		border: 1upx solid #dddddd;
		border-radius: 100upx;
		margin: 0 40upx;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 60upx;
		height: 60upx;
		margin: 20upx;
	}

	.btn-row {
		margin-top: 68upx;
	}

	.log-btn {
		border-radius: 88upx;
		font-size: 34upx;
		box-shadow: 0px 16upx 32upx 0px rgba(2, 168, 244, 0.24);
	}

	.input-row {
		height: 120upx;
		display: flex;
		align-items: center;
	}

	.select {
		position: absolute;
		background: #ffffff;
		z-index: 10;
		width: 630upx;
		padding: 20upx 40upx;
		transition: all 0.5s;
	}

	.select-list {
		margin: 5upx;
		height: 45upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.select-list-name {
		flex: 1;
	}

	.select-list-icon {
		width: 100upx;
		height: 45upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.none {
		transition: all 0.5s;
		background-color: rgba(255, 255, 255, 0);
	}
</style>
